<template>
  <div>
    <el-table :data="dataList" style="width: 100%;" border>
      <el-table-column :selectable="checkboxT" type="selection" width="55" />
      <el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
      <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" />
      <el-table-column :show-overflow-tooltip="true" prop="dept" label="部门">
        <template slot-scope="{row}">
          <div>{{ row.dept && row.dept.name }}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="enabled">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.enabled"
            active-color="#04C1C2"
            inactive-color="#F56C6C"
            :disabled="userInfo.userId === row.id"
            @change="changeEnabled(row, row.enabled)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" width="135" label="创建日期">
        <template slot-scope="{row}">
          <span>{{ parseTime(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="170"
        align="center"
        fixed="right"
      >
        <template slot-scope="{row}">
          <div>
            <el-button size="mini" type="primary" icon="el-icon-edit" :disabled="userInfo.userId === row.id" />
            <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="userInfo.userId === row.id" @click="deletUser(row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { mapGetters } from 'vuex'
import api from '@/api/permission'
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    parseTime,
    checkboxT(row, rowIndex) {
      return row.id !== this.userInfo.userId
    },
    // 禁用启用
    changeEnabled(v, val) {
      this.$confirm(`此操作将 ${val ? '激活' : '禁用'} ${v.username}, 是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.enabled(v).then(res => {
          this.$emit('search')
          this.$message.success('操作成功~')
        }).catch(() => {
          v.enabled = !v.enabled
        })
      }).catch(() => {
        v.enabled = !v.enabled
      })
    },
    // 删除
    deletUser(v) {
      this.$confirm(`确认要删除吗${v.username}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.delet([v.id]).then(res => {
          this.$emit('search')
          this.$message.success('操作成功~')
        })
      }).catch(() => {
      })
    }

  }
}
</script>
<style scoped lang="scss">

</style>
